<template>
  <header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/list">
           Wu的Java小站
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto" v-if="!loginMember.id">
            <li class="nav-item active">
              <router-link class="nav-link" to="/list">首页</router-link>
            </li>
            <!-- <li class="nav-item active" style="color:white">
              <file :after-upload="afterUploadContentFile" :suffixs="['jpg', 'jpeg', 'png']"></file>
            </li> -->
            <li class="nav-item active">
              <button v-on:click="openLoginModal()" class="btn btn-outline-light my-2 my-sm-0">登录/注册</button>
            </li>

          </ul>
          <ul class="navbar-nav mr-auto" v-if="loginMember.id">
            <li class="nav-item active">
              <router-link class="nav-link" to="/list">首页</router-link>
            </li>
            <li class="nav-item active">
              <router-link class="nav-link position-relative" to="/letter" > 消息
                <!-- <span class="badge badge-danger" style="  position: absolute;top: 12px;right: 0px;">2</span> -->
<!--                <span  class="badge badge-danger">{{messageUnreadcount!=0?messageUnreadcount:0}}</span>-->
              </router-link>
            </li>
            
							<li class="nav-item ml-3 btn-group-vertical dropdown">
								<a class="nav-link dropdown-toggle"  id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									<img :src="loginMember.photo" class="rounded-circle" style="width:30px;"/>
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
									<a class="dropdown-item text-center" :href="'/profile/'+loginMember.id">个人主页</a>
									<a class="dropdown-item text-center" v-on:click="logout()" >退出登录</a>

									<div class="dropdown-item text-center">
<!--                     <file v-bind:input-id="'content-file-upload'"
                                              v-bind:text="'上传文件'"
                                              v-bind:suffixs="['jpg', 'jpeg', 'png']"
                                              v-bind:use="FILE_USE.COURSE.key"
                                              v-bind:after-upload="afterUploadContentFile"></file>-->
                  </div>
									<span class="dropdown-item text-center text-secondary">{{loginMember.name}}</span>
								</div>
							</li>
          </ul>
          <div class="form-inline my-2 my-lg-0" >
            <input class="form-control mr-sm-2" v-model="searchMsg"/>
            <button @click="serchTieba()" class="btn btn-outline-light my-2 my-sm-0">搜索贴吧</button>
            <button @click="serchInAllPost()" class="btn btn-outline-light my-2 my-sm-0">全吧搜索</button>
					</div>
        </div>
      </div>
    </nav>

    <the-login ref="loginComponent"></the-login>
  </header>
</template>

<script>
  import  {mapState,mapMutations} from 'vuex';
  import file from './file.vue'
  import TheLogin from "./login";
  export default {
    name: 'newheader',
    components: {TheLogin,file},
    data: function () {
      return {
        searchMsg:'',
        loginMember: {},
        course: {},
        FILE_USE: FILE_USE,
        messageUnreadcount:0,
      }
    },
    computed:{
      ...mapState([
          'iflogin'
      ])
    },
    //监听登录状态
    watch:{
      iflogin(){    
        console.log('发生变化')
        // if(!this.iflogin){
          this.openLoginModal()
        // }

      }

    },
    mounted() {
      let _this = this;
      _this.loginMember = Tool.getLoginMember();
      //_this.getMessageUnreadcount();/*为什么每次都是token为null */
    },
    methods: {
      ...mapMutations([
        'setifsearch'
      ]),
      /**
       * 打开登录注册窗口
       */
      openLoginModal() {
        let _this = this;
        _this.$refs.loginComponent.openLoginModal();
      },

      setLoginMember(loginMember) {
        let _this = this;
        _this.loginMember = loginMember;
      },

      logout () {
        let _this = this;
        _this.$ajax.get(process.env.VUE_APP_SERVER + '/business/web/member/logout/' + _this.loginMember.token).then((response)=>{
          let resp = response.data;
          if (resp.success) {
            Tool.setLoginMember(null);
            _this.loginMember = {};
            Toast.success("退出登录成功");
            _this.$router.push("/");
          } else {
            Toast.warning(resp.message);
          }
        });
      },
      /**
       * 搜索贴吧
       */
      serchTieba(){
       
        this.$router.push({
          path:'/searchTieba/'+this.searchMsg
        })
         this.setifsearch()
      },
      /**
       * 全吧搜索
       */
      serchInAllPost(){
        this.$router.push({
          path:'/search/'+this.searchMsg
        })
      },
      /**
       * 上传内容文件后，更新member表中的头像url
       */
      afterUploadContentFile(response) {
        let _this = this;
        console.log("开始更新用户头像");
        let file = response.content;
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/member/headerUrl',{
          url: file.path,
        }).then((response)=>{
          let resp = response.data;
          if (resp.success) {
            Toast.success("上传文件成功");
            _this.files.push(resp.content);
          }
        });

      },
      getMessageUnreadcount() {
        let _this = this;
        // console.log(_this.$ajax)
        _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/message/unreadcount/'+_this.loginMember.id).then((response)=>{
          let resp = response.data;
          if (resp.success) {
            _this.messageUnreadcount=resp.content;
          }
        });

      },

    }
  }
</script>
<style lang="scss" scoped>
    @import '@/assets/style/css/global.scss';
    .bg-dark{
      background: #2ECEE7 !important;
    }

    .form-inline{
      float: right;
      &>button{
        margin-right: 10px;
      
      }
    }
</style>
